<template>
	<view>
		<!-- 公司角色可见 -->
		<view class="clerk-box">
			<view class="row-box header-box">
				<view class="h2-font" style="width: 80%;">门店管理列表</view>
				<view class="btn-box row-box">
					<view>
						<u-button type="success" size="mini" text="修改" @click="handlePicker('store')"></u-button>
					</view>
					<view style="margin-left: 10rpx;" v-if="userInfo.role === canstat.ROLE_COMPANY">
						<u-button type="primary" size="mini" text="新增" @click="handlePopup('store')"></u-button>
					</view>
				</view>
			</view>
			
			<u-collapse>
				<u-collapse-item :title="(index + 1) + '、' + item.name" v-for="(item, index) in storeList" :key="index">
					<view class="item-box" v-for="(it, key) in item.children" :hover-class="'hover-class'">
						<view class="name-box" @click="handlePopup('clerk', it)">{{(key + 1) + "、" + it.nickName}}</view>
						<view class="time-box">
							<u-button type="primary" size="mini" text="设为店长" plain v-if="it.type === 4" @click="editStoreRole(it.id)"></u-button>
							<u-tag v-else type="success" text="店长" size="mini"></u-tag>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
			
			<view class="foot-box">
				<u-button plain type="success" text="新增店员" @click="handlePopup('clerk')"></u-button>
			</view>
		</view>
		
		<u-picker :show="storeOpen" :columns="[storeList]" keyName="name" @confirm="storeChange" @cancel="storeOpen = false"></u-picker>
		
		<u-popup :show="popupShow" @close="popupClose()" :closeable="true">
			<view class="h2-font" style="padding: 20rpx;">{{title}}</view>
			<view v-if="popupType === 'clerk'" class="form-box">
				<u--form labelWidth="auto" label-align="right" :border-bottom="true" :model="clerkForm" ref="cForm">
					<u-form-item label="名称" required>
						<u--input placeholder="请输入店员名称" :maxlength="8" v-model="clerkForm.nickName"></u--input>
					</u-form-item>
					<u-form-item label="手机" required>
						<u--input placeholder="请输入店员手机号码" v-model="clerkForm.phone"></u--input>
					</u-form-item>
					<u-form-item label="密码" required>
						<u--input type="password" placeholder="请输入店员登录密码" v-model="clerkForm.password"></u--input>
					</u-form-item>
					
					<u-form-item label="门店" required @click="handlePicker('clerk')">
						<u--input readonly placeholder="请选择门店" :maxlength="8" v-model="clerkForm.storeName"></u--input>
					</u-form-item>
				</u--form>
			</view>
			
			<view v-if="popupType === 'store'" class="form-box">
				<u--form labelWidth="auto" label-align="right" :model="storeForm" ref="sForm">
					<u-form-item label="名称" prop="name" required>
						<u--input placeholder="请输入门店名称" v-model="storeForm.name"></u--input>
					</u-form-item>
					<u-form-item label="地址" prop="address">
						<u--input placeholder="请输入门店地址" v-model="storeForm.address"></u--input>
					</u-form-item>
				</u--form>
			</view>
			
			<view style="margin-top: 20rpx;padding: 20rpx;">
				<u-button text="提交" type="success" @click="submitFrom"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				canstat: this.$constant,
				//店员表单
				clerkForm: {},
				//门店表单
				storeForm: {},
				storeOpen: false,
				title: '店员详情',
				popupType: 'clerk',
				//弹出层开关
				popupShow: false,
				storeList: [],
				userInfo: undefined,
			}
		},
		created() {
			this.getList();
			this.userInfo = uni.getStorageSync(this.$constant.ROLE_INFO_KEY)
		},
		methods: {
			getList() {
				this.$request("/appCommon/store/list", "get").then(res => {
					this.storeList = res.data;
					this.storeList.forEach(it => {
						it.open = false;
						it.children.forEach(cit => {
							cit.show = false
							cit.storeName = it.name;
						})
					})
				})
			},
			/* 设为店长 */
			editStoreRole(id) {
				this.$request("/appCommon/edit/roleStore/" + id, 'put').then(res => {
					uni.showToast({
						title:"操作成功！"
					})
					this.getList();
				})
			},
			/* 提交事件 */
			submitFrom() {
				//门店提交
				if(this.popupType === 'store') {
					this.$request("/appCommon/createShop", 'post', this.storeForm).then(res => {
						uni.showToast({
							title:"操作成功！"
						})
						this.popupClose();
						this.getList();
					})
				}
				
				if(this.popupType === 'clerk') {
					if(!this.clerkForm.nickName) {
						uni.showToast({
							icon: 'error',
							title: "请输入店员名称"
						})
						return;
					}
					if(!this.clerkForm.phone) {
						uni.showToast({
							icon: 'error',
							title: "请输入正确的手机号"
						})
						return;
					}
					if(!this.clerkForm.storeId) {
						uni.showToast({
							icon: 'error',
							title: "请选择门店"
						})
						return;
					}
					this.clerkForm.username = this.clerkForm.phone;
					this.$request("/appCommon/create/clerk", 'post', this.clerkForm).then(res => {
						uni.showToast({
							title:"操作成功！"
						})
						this.popupClose();
						this.getList();
					})
				}
			},
			//门店表单重置
			storeReset() {
				this.storeForm = {
					id: undefined,
					name: undefined,
					address: undefined
				}
			},
			//店员表单重置
			clerkReset() {
				this.clerkForm = {
					id: undefined,
					phone: undefined,
					nickName: undefined,
					storeId: undefined,
					storeName: undefined
				}
			},
			/* 打开选项 */
			handlePicker(e){
				if(e === 'clerk') {
					this.popupShow = false;
				}
				this.popupType = e;
				this.storeOpen = true;
			},
			/* 门店选择器 确定事件 */
			storeChange(e) {
				if(this.popupType === 'clerk') {
					this.clerkForm.storeId = e.value[0].id;
					this.clerkForm.storeName = e.value[0].name;
					this.popupShow = true;
				}else {
					this.handlePopup("store", e.value[0]);
				}
				
				this.storeOpen = false;
			},
			/* 弹出层打开事件  */
			handlePopup(e, row) {
				if(e == 'clerk') {
					this.title = "店员详情";
					this.clerkReset();
					if(row){
						this.clerkForm = row;
					}
				}
				if(e == 'store') {
					this.title = "门店详情";
					this.storeReset();
					if(row){
						this.storeForm = row;
					}	
				}
				this.popupShow = true;
				this.popupType = e;	
			},
			popupClose() {
				this.popupShow = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.clerk-box {
		background-color: #fff;
		.header-box {
			padding: 20rpx;
		}
		.btn-box {
			background-color: $uni-bg-color;
		}
	}
	.item-box {
		border-bottom: 1px solid #e4e7ed;
		padding: 20rpx 5rpx;
		display: flex;
		flex-direction: row;
		.name-box {
			font-size: 32rpx;
			width: 82%;
		}
		.time-box {
			width: 15%;
			text-align: right;
			font-size: 24rpx;
		}
	}
	.hover-class {
		background-color: #e4e7ed;
	}
	.form-box {
		padding: 20rpx;
	}
	.foot-box {
		width: 90%;
		margin-left: 5%;
		position: fixed;
		bottom: 100rpx;
	}
</style>
